<template>
  <div class="remake">
    <div>
      <div class="tableware" @click="mask = true">
        <div>餐具份数</div>
        <div v-if="remark.tableware">{{remark.tableware}}份餐具<i class="jiantou iconfont icon-youjiantou"></i></div>
        <div v-else>未选择<i class="jiantou iconfont icon-youjiantou"></i></div>
      </div>
      <div class="tableware" @click="remakeMask = true">
        <div>订单备注</div>
        <div v-if="remark.remark">{{remark.remark}}<i class="jiantou iconfont icon-youjiantou"></i></div>
        <div v-else>口味、偏好<i class="jiantou iconfont icon-youjiantou"></i></div>
      </div>
      <div class="tableware tableware-1">
        <div>发票信息</div>
        <div>不需要开发票<i class="jiantou iconfont icon-youjiantou"></i></div>
      </div>
    </div>

    <!-- 餐具 -->
    <div class="copies animate__animated animate__fadeIn animate__faster" v-if="mask">
      <div class="copies-content animate__animated animate__fadeInUp animate__faster">
        <div class="title">— 餐具份数 — <i class="iconfont icon-chahao2" @click="closeMask()"></i></div>
        <div :class="{'isActive':index == idx}" v-for="(item,index) in number" :key="index" class="number" @click="handle(item,index)">
          {{item}}
        </div>
      </div>
    </div>

    <!-- 口味 -->
    <div class="copies animate__animated animate__fadeIn animate__faster" v-if="remakeMask">
      <div class="copies-content copies-taste  animate__animated animate__fadeInUp animate__faster">
        <div class="title">— 口味、偏好 — <i class="iconfont icon-chahao2" @click="closeMask()"></i></div>
        <div>
          <textarea class="textarea" placeholder="填写额外的对餐厅和起手小哥的备注信息" name="" id="" cols="50" rows="8" v-model="text"></textarea>
        </div>
        <div class="taste">
          <div>
            <span :class="{'active':item.select}" v-for="(item,index) in radioItem" :key="index" @click="handeDelsoue(item)"><span>{{item.name}}</span></span>
          </div>
          <div :class="{'active':item.select}" v-for="(item,index) in switchItem" :key="index" @click="handeWwitchItem(item)"><span>{{item.name}}</span></div>

        </div>
        <div class="handleOk" @click="handleOk">确定</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'remake',
  data () {
    return {
      number: [1, 2, 3, 4, 5, 6],
      idx: '',
      mask: false,
      num: '',
      remakeMask: false,
      radioItem: [
        { name: '不要辣', select: false },
        { name: '少点辣', select: false },
        { name: '多点辣', select: false },
      ],
      switchItem: [
        { name: '不要香菜', select: false },
        { name: '少点葱', select: false },
        { name: '多点醋', select: false },
        { name: '少点醋', select: false },
        { name: '不要洋葱', select: false },
      ],
      text: '',
    }
  },
  created () {
  },
  computed: {
    remark () {
      console.log(this.$store.state.remakeInfo);
      return this.$store.state.remakeInfo
    }
  },
  methods: {
    handle (item, index) {
      this.idx = index
      this.mask = false
      this.$store.dispatch('addRemake', {
        tableware: item,
        remark: this.$store.getters.addRemake.remark
      })
    },
    closeMask () {
      this.mask = false
      this.remakeMask = false
    },
    handeDelsoue (item) {
      // console.log(this.radioItem);
      // item.select = !item.select
      if (this.radioItem.length > 0) {
        this.radioItem.forEach(food => {
          if (food.name == item.name) {
            food.select = !food.select
          } else {
            food.select = false
          }
        })
      }
    },
    handeWwitchItem (item) {
      item.select = !item.select
    },
    handleOk () {
      let remark = ''
      this.radioItem.forEach(item => {
        if (item.select) {
          remark += item.name + ','
        }
      })
      this.switchItem.forEach(item => {
        if (item.select) {
          remark += item.name + ','
        }
      })
      remark += this.text;
      console.log(remark);
      this.$store.dispatch('addRemake', {
        tableware: this.$store.getters.addRemake.tableware,
        remark
      })
      this.remakeMask = false
      console.log(' this.remark', this.remark);
    }
  },
}
</script>
<style  scoped>
.tableware {
  display: flex;
  justify-content: space-between;
  border-bottom: 0.05rem rgb(237, 234, 234) solid;
  padding: 0.3rem;
}
.tableware-1 {
  border-bottom: 0;
  padding: 0.3rem 0.3rem 0 0.3rem;
}
.remake {
  margin-top: 0.2rem;
  padding: 0.3rem;
  background-color: #fff;
  border-radius: 0.2rem;
}
.tableware div:nth-child(1) {
  font-size: 0.35rem;
  font-weight: 550;
  color: rgb(80, 78, 78);
}
.tableware div:nth-child(2) {
  font-size: 0.2rem;
  color: rgb(179, 177, 177);
}
.copies {
  position: fixed;
  background-color: #00000083;
  width: 100%;
  height: 100vh;
  text-align: center;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  border-radius: 0.2rem 0.2rem 0 0;
  padding-bottom: 1rem;
}
.title {
  font-size: 0.35rem;
  margin-top: 0.3rem;
  font-weight: 550;
  color: #3d3b3d;
}
.number {
  height: 1rem;
  line-height: 1rem;
}
.isActive {
  color: #0593ed;
}
.mask {
  height: 100vh;
}
.copies-content {
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: #fff;
  min-height: 8rem;
}
.icon-chahao2 {
  position: absolute;
  right: 0.3rem;
  font-size: 0.5rem;
}
.textarea {
  background-color: rgba(242, 242, 242, 0.418);
  border-radius: 0.2rem;
  padding: 0.2rem;
  margin-top: 0.2rem;
  color: #27242483;
  font-size: 0.3rem;
}
.taste {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0.5rem 0.7rem;
}
.taste div {
  box-sizing: border-box;
  min-width: 15%;
  height: 0.8rem;
  line-height: 0.8rem;
  /* background: #0979ff; */
  border-radius: 0.15rem;
  margin-bottom: 0.3rem;
  margin-right: 2%;
  color: rgb(63, 62, 62);
  font-size: 0.2rem;
  border: 0.03rem #ccc solid;
  overflow: hidden;
}
.taste div span {
  border-right: 0.03rem #ccc solid;
  padding: 0 0.15rem;
  display: inline-block;
}
.taste div span:nth-last-child(1) {
  border-right: none;
}
.handleOk {
  background-color: #11dc60;
  height: 1rem;
  line-height: 1rem;
  margin: 0 10%;
  color: #fff;
}
.copies-taste {
  padding-bottom: 1rem;
}
.active {
  background-color: #0593ed;
  color: #fff !important;
}
</style>
